<template>
  <div>
    <!--  面包屑  -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>常见问题</el-breadcrumb-item>
      <el-breadcrumb-item>问题列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 下拉框及查询、添加按钮 -->
    <el-form ref="form" :model="form" label-width="80px" class="el-form-my">
    <el-form-item label="课程：" class="el-form-item-my ">
      <el-select v-model="form.course" placeholder="请选择" style=" width: 220px">
        <el-option label="大学计算机" value="大学计算机"></el-option>
        <el-option label="C语言" value="C语言"></el-option>
        <el-option label="Python" value="Python"></el-option>
      </el-select>
    </el-form-item>
      <el-form-item label="章节：" class="el-form-item-my">
        <el-select v-model="form.page" placeholder="请选择" style="width: 220px">
          <el-option label="第一章" value="第一章"></el-option>
          <el-option label="第二章" value="第二章"></el-option>
          <el-option label="第三章" value="第三章"></el-option>
          <el-option label="第四章" value="第四章"></el-option>
          <el-option label="第五章" value="第五章"></el-option>
          <el-option label="第六章" value="第六章"></el-option>
          <el-option label="高频问题" value="高频问题"></el-option>
        </el-select>
      </el-form-item>
      <el-button type="info" @click="search()" style="margin-left: 10px">查询</el-button>
      <el-button type="success" @click="add()">添加</el-button>
      </el-form>
    <!-- 表格 -->
    <el-table
      :data="tableData"
      style="width: 100% ;height: 100%">
      <el-table-column
        fixed="left"
        prop="id"
        label="编号"
        width="100">
      </el-table-column>
      <el-table-column
        prop="course"
        label="课程"
        width="200">
      </el-table-column>
      <el-table-column
        prop="page"
        label="章节"
        width="150">
      </el-table-column>
      <el-table-column
        show-overflow-tooltip="true"
        prop="question"
        label="问题"
        width="300">
      </el-table-column>
      <el-table-column
        show-overflow-tooltip="true"
        prop="answer"
        label="答案"
        width="300">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="执行操作"
        width="200"
      >
        <template slot-scope="scope">
          <el-button
            @click="edit(scope.row)"
            size="mini">
            编辑
          </el-button>
          <!--      scope.row能返回该行的所有数据信息      -->
          <el-button
            @click.native.prevent="deleteRow(scope.row.id,scope.$index, tableData)"
            type="danger"
            size="mini">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加表单 -->
    <el-dialog title="添加问题" :visible.sync="dialogFormVisible1">
    <el-form ref="form" :model="questionForm1" label-width="80px" size="medium">
      <el-form-item label="课程">
        <el-select v-model="questionForm1.course" placeholder="请选择课程" style="float: left; width: 383px" >
          <el-option label="大学计算机" value="大学计算机"></el-option>
          <el-option label="C语言" value="C语言"></el-option>
          <el-option label="Python" value="Python"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="章节">
        <el-select v-model="questionForm1.page" placeholder="请选择章节" style="float: left; width: 383px" >
          <el-option label="第一章" value="第一章"></el-option>
          <el-option label="第二章" value="第二章"></el-option>
          <el-option label="第三章" value="第三章"></el-option>
          <el-option label="第四章" value="第四章"></el-option>
          <el-option label="第五章" value="第五章"></el-option>
          <el-option label="第六章" value="第六章"></el-option>
          <el-option label="高频问题" value="高频问题"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="问题">
        <el-input type="textarea" v-model="questionForm1.question"></el-input>
      </el-form-item>
      <el-form-item label="解答">
        <el-input type="textarea" v-model="questionForm1.answer"></el-input>
      </el-form-item>
      <div style="width: 750px">
        <el-button type="primary" @click="submit" style="width: 100px">提交</el-button>
        <el-button @click="cancel" style="width: 100px; margin-left: 150px">取消</el-button>
      </div>
    </el-form>
    </el-dialog>
    <!-- 编辑表单 -->
    <el-dialog title="编辑问题" :visible.sync="dialogFormVisible2">
      <el-form ref="form" :model="questionForm2" label-width="80px" size="medium">
        <el-form-item label="课程">
          <el-select v-model="questionForm2.course" placeholder="请选择课程" style="float: left; width: 383px" >
            <el-option label="大学计算机" value="大学计算机"></el-option>
            <el-option label="C语言" value="C语言"></el-option>
            <el-option label="Python" value="Python"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="章节">
          <el-select v-model="questionForm2.page" placeholder="请选择章节" style="float: left; width: 383px" >
            <el-option label="第一章" value="第一章"></el-option>
            <el-option label="第二章" value="第二章"></el-option>
            <el-option label="第三章" value="第三章"></el-option>
            <el-option label="第四章" value="第四章"></el-option>
            <el-option label="第五章" value="第五章"></el-option>
            <el-option label="第六章" value="第六章"></el-option>
            <el-option label="高频问题" value="高频问题"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="问题">
          <el-input type="textarea" v-model="questionForm2.question"></el-input>
        </el-form-item>
        <el-form-item label="解答">
          <el-input type="textarea" v-model="questionForm2.answer"></el-input>
        </el-form-item>
        <div style="width: 750px">
          <el-button type="primary" @click="submit2" style="width: 100px">提交</el-button>
          <el-button @click="cancel2" style="width: 100px; margin-left: 150px">取消</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'Question',
  data () {
    return {
      // 下拉框的数据
      form: {
        course: '',
        page: ''
      },
      // 表格数据
      tableData: [{
        course: '',
        page: '',
        question: '',
        answer: ''
      }],
      // 是否显示添加、编辑表单
      dialogFormVisible1: false,
      dialogFormVisible2: false,
      // 添加表单数据
      questionForm1: {
        course: '',
        page: '',
        question: '',
        answer: ''
      },
      // 编辑表单数据
      questionForm2: {
        course: '',
        page: '',
        question: '',
        answer: ''
      }
    }
  },
  methods: {
    // 显示编辑的表单及其数据
    edit (row) {
      this.questionForm2.id = row.id
      this.questionForm2.course = row.course
      this.questionForm2.page = row.page
      this.questionForm2.question = row.question
      this.questionForm2.answer = row.answer
      this.dialogFormVisible2 = true
    },
    // 提交编辑表单
    submit2 () {
      this.$axios({
        url: 'test/question/edit',
        method: 'post',
        data: this.questionForm2
      }).then(res => {
        if (res.data === 1) {
          this.$message.success('成功！')
          this.dialogFormVisible2 = false
          this.questionForm2 = {} // 这里必须赋值为一个空的对象，不能为" " ！！！不然Invalid prop: type check failed for prop "model".
        }
      })
    },
    // 取消编辑表单
    cancel2 () {
      this.dialogFormVisible2 = false
    },
    deleteRow (id, index, rows) {
      this.$confirm('此操作将删除该活动, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 在then()中进行删除操作
        // 先在前端页面进行删除
        rows.splice(index, 1)
        this.$axios({
          url: 'test/question/delete',
          method: 'post',
          data: {id}
          //  一定要用json格式的数据！！！！！！！！！！！
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 显示添加表单
    add () {
      this.dialogFormVisible1 = true
    },
    // 提交添加表单
    submit () {
      this.$axios({
        url: 'test/question/add',
        method: 'post',
        data: this.questionForm1
      }).then(res => {
        if (res.data === 1) {
          this.$message.success('成功！')
          this.dialogFormVisible1 = false
          this.questionForm1 = {} // 这里必须赋值为一个空的对象，不能为" " ！！！不然Invalid prop: type check failed for prop "model".
        }
      })
    },
    // 取消添加表单
    cancel () {
      this.dialogFormVisible1 = false
    },
    // 按照搜索查询
    search () {
      this.$axios({
        url: 'test/question/search',
        method: 'post',
        data: {
          course: this.form.course,
          page: this.form.page
        }
      }).then(res => {
        this.tableData = res.data
      }).catch(err => {
        console.log(err)
      })
    },
    // 查询表格数据
    searchAll () {
      axios.get('test/question/searchAll').then(res => {
        this.tableData = res.data
      }).catch(err => {
        console.log(err)
      })
    }
  },
  mounted () {
    this.searchAll()
  }
}
</script>

<style scoped>
  .el-form-item-my {
    width: 300px;
    display: inline-block;
    margin-bottom: 10px;
  }
  .el-form-my {
    margin-top: 20px;
    text-align: left;
  }
</style>
